<!--
 * @Author: qyj@gxshool.com
 * @Date: 2023-11-23 09:32:50
 * @LastEditTime: 2023-11-28 09:55:53
 * @Descripttion: 
-->
<template>
    <div class="container">
        <a-form ref="form" :model="formState" class="login-form" @finish="onFinish">
            <h2 class="title">GX-ANTD后台登录 LOGIN</h2>
            <a-form-item name="username" :rules="[{ required: true, message: 'please input your username!' }]">
                <a-input v-model:value="formState.username" placeholder="账号 account">
                    <template #prefix>
                        <UserOutlined class="site-form-item-icon" />
                    </template>
                </a-input>
            </a-form-item>
            <a-form-item name="password" :rules="[{ required: true, message: 'please input your password!' }]">
                <a-input-password v-model:value="formState.password" placeholder="密码 password">
                    <template #prefix>
                        <LockOutlined class="site-form-item-icon" />
                    </template>
                </a-input-password>
            </a-form-item>
            <a-form-item name="captcha" :rules="[{ required: true, message: 'please input your captcha!' }]">
                <a-input v-model:value="formState.captcha" placeholder="验证码 captcha">
                    <template #prefix>
                        <CodeSandboxOutlined class="site-form-item-icon" />
                    </template>
                </a-input>
            </a-form-item>
            <a-form-item style="margin-top: 30px;">
                <a-button class="submit" type="primary" :loading="loginLoading" html-type="submit">
                    登 录 LOGIN
                </a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<script setup>
    import { UserOutlined, LockOutlined,CodeSandboxOutlined } from '@ant-design/icons-vue';
    import { reactive } from 'vue';
    import {post} from '@/utils/request.js'
    const formState = reactive({});
    const loginLoading = reactive(false)
    const onFinish = values => {
        values.password=encodeURI(JSON.stringify(values.password))
        post("/login/index",values).then(rs=>{
            console.log(rs)
        }).catch(err=>{
            console.log(err)
        })
        console.log('Success:', values);
    };
</script>
<style>
    .container{position:absolute;width:100%;height:100%;overflow:auto;background-image:radial-gradient(#096dd999,#d5e0652b)}
    .login-form{width:565px;margin:0 auto;padding:40px 110px;background-image:radial-gradient(#61a2ed,#096dd9);border-radius:10px;margin-top:200px}
    .logXin-title{color:#fff;text-align:center;margin:150px 0 60px 0;font-size:36px;font-family:Microsoft Yahei}
    .ant-form-item{margin-bottom: 15px;}
    .submit{width:100%;height:45px;font-size:16px}
    .title{margin-bottom:30px;color:#fff;font-weight:700;font-size:24px;font-family:Microsoft Yahei}
    .site-form-item-icon{color: rgba(0, 0, 0, 0.25);}
    .ant-form-item .ant-form-item-explain-error{text-align: right;}
</style> 